| 性能优化 | 您所在的位置：网站首页 › selenium performance 解析 › 性能优化 |
性能优化
|
「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。 前言领导:"小凌，可以优化下项目的白屏时间么？",最近接到这么一个关于性能优化的任务。解决问题的第一步是要先复现问题。可是页面的白屏时间怎么计算呢？小凌首先想到的是浏览器调试工具下的Performance。 在之前看过一个讲座，讲的是window.performance对性能的监控。于是便对这个进行了进一步研究。 performance的作用是浏览器暴露给js的一个接口，可以通过这个接口查看用户访问网站的连接建立时间、dns时间等信息。使用该api时需要在页面完全加载完成之后才能使用，最简单的办法是在window.onload事件中读取各种数据，因为很多值必须在页面完全加载之后才能得出。 performance.timing属性介绍下面的图大家一定不陌生： 属性说明： navigationStart：浏览器处理当前网页的启动时间 fetchStart：浏览器发起http请求读取文档的毫秒时间戳。 domainLookupStart：域名查询开始时的时间戳。 domainLookupEnd：域名查询结束时的时间戳。 connectStart：http请求开始向服务器发送的时间戳。 connectEnd：浏览器与服务器连接建立（握手和认证过程结束）的毫秒时间戳。 requestStart：浏览器向服务器发出http请求时的时间戳。或者开始读取本地缓存时。 responseStart：浏览器从服务器（或读取本地缓存）收到第一个字节时的时间戳。 responseEnd：浏览器从服务器收到最后一个字节时的毫秒时间戳。 domLoading：浏览器开始解析网页DOM结构的时间。 domInteractive：网页dom树创建完成，开始加载内嵌资源的时间。 domContentLoadedEventStart：网页DOMContentLoaded事件发生时的时间戳。 domContentLoadedEventEnd：网页所有需要执行的脚本执行完成时的时间，domReady的时间。 domComplete：网页dom结构生成时的时间戳。 loadEventStart：当前网页load事件的回调函数开始执行的时间戳。loadEventEnd：当前网页load事件的回调函数结束运行时的时间戳。 计算性能指标可以使用Navigation.timing 统计到的时间数据来计算一些页面性能指标，比如DNS查询耗时、白屏时间、domready等等。如下： DNS查询耗时 = domainLookupEnd - domainLookupStart TCP链接耗时 = connectEnd - connectStartrequest 请求耗时 = responseEnd - responseStart 解析dom树耗时 = domComplete - domInteractive 白屏时间 = domLoading - fetchStart domready时间 = domContentLoadedEventEnd - fetchStart onload时间 = loadEventEnd - fetchStart 计算性能工具类我们可以利用上面讲的特性来建立我们自己的性能计算工具类： timing.js (function () { function handleAddListener(type, fn) { if (window.addEventListener) { window.addEventListener(type, fn); } else { window.attachEvent('on' + type, fn); } } function getTiming() { try { var time = performance.timing; var timingObj = {}; var loadTime = (time.loadEventEnd - time.loadEventStart) / 1000; if (loadTime { console.log(key + ':' + timingObj[key] + '毫秒(ms)'); }); console.log(performance.timing); } catch (e) { console.log(e); console.log(timingObj); console.log(performance.timing); } } handleAddListener('load', getTiming); })();index.html 小凌爱前端如此我们便可以在首页种监听我们的性能变化了。 目前关于Window.performance.timing 的浏览器兼容性如下图所示： |
【本文地址】
公司简介
联系我们